<template>
  <div class="wrap">
    <div class="bar1" ref="crosswise"></div>
  </div>
</template>
<script>
import mixinData from "../utils/mixin.js"

export default {
   //mixin混入
  mixins:[mixinData],
  methods: {
    async getData() {
      //获取业务数据
      let res = await this.$http.get("TotalAreaCropsProportion");
      this.data = res.data;
      // console.log(this.data);
      this.getEcharts();
  console.log(mixinData);

    },
    getEcharts() {
      //创建echarts实例
      this.echarts = this.$echarts.init(this.$refs.crosswise, this.themeName);
      // let category = this.data.map((item) => item.name);
      // let value = this.data.map((item) => item.value);
      // console.log(category,value);
      //设置配置项
      let option = {
        title: {
          text: "▍种植农作物面积统计",
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        // 提示语
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            z: 0,
            lineStyle: {
              type: "solid",
            },
          },
        },
        //图例
        legend: {
          top: "15%",
          // itemGap: 20,
          // itemWidth: 25,
          // itemHeight: 15,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            data: this.data,
            colorBy: "data",
            radius: "50%",
            label: {
              show: true,
              fontSize: 16,
            },
          },
        ],
      };
      this.echarts.setOption(option);
      this.resize();
    },
    resize() {
      // 获取一个比例尺
      let width = this.$refs.crosswise.offsetWidth;
      // 3.5-3.7
      let scale = (width / 100) * 3.6;
      // 根据比例尺动态设置标题、图例
      let updateOption = {
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
        legend: {
          itemGap: scale / 2,
          itemWidth: scale,
          itemHeight: scale / 2,
        },
        // 系列
        series: [
          {
            radius: scale * 5,
          },
        ],
      };
      this.echarts.setOption(updateOption);
      this.echarts.resize();
    },
  },
  mounted() {
    this.getData();
    //一进来就监听窗口变化
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped>
</style>